{template 'common/header'}
<link rel="stylesheet" type="text/css" href="../addons/ewei_shop/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../addons/ewei_shop/template/mobile/default/static/css/style.css">

<style>
    .header-box{
        position: absolute;
        width: 100%;
        top: 0;
        height: 25%;
    }
    #main-box{
        position: absolute;
        width: 100%;
        top: 25%;
        height: 75% !important;
        overflow: auto;
    }
    #info-bar{
        position: absolute;
        width: 100%;
        bottom: 0;
    }

</style>

<title>{$title}</title>

<div class="xhq_body body_bg6">
    <div id="container" style="height: 100%;">

    </div>
</div>

<script id='tpl_header' type='text/html'>

    <div class="header-box ">
        <div class="container-fluid vip-info-bg" id="info-box">
            <div class="user-head-pic pull-left margin-sm">
                <img src="<%member.avatar%>" alt="" class="img-responsive img-circle">
            </div>
            <div class="container-fluid pull-left margin-sm">
                <ul class="list-unstyled vip-info-list">
                    <li><h6 class="pull-left">昵称：</h6><h6 class="pull-left"><%member.nickname%></h6></li>
                    <li><h6 class="pull-left">花名：</h6><h6 class="pull-left"><%member.commission.levelname%></h6></li>
                    <li><h6 class="pull-left">编号：</h6><h6 class="pull-left"><%member.id%></h6></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid amount_detail_banner" id="info-bar">
            <div class="row">
                <div class="col-xs-6 pull-left">
                    <div class="row border-right">
                        <h5 class="text-center white_font"><%commissionset.texts.orderprice%> : <%member.cg_money%>元</h5>
                    </div>
                </div>
                <div class="col-xs-6 pull-left">
                    <div class="row">
                        <h5 class="text-center white_font"><%commissionset.texts.order%> : <%member.commissioncount%>元</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

</script>

<script id='tpl_content' type="text/html">

    <div id="main-box" style="height: 100%;">

        <%if lists != '' %>
        <ul class="list-group order-box">
            <%each lists as list%>
            <li class="list-group-item">
                <div class="order-info">
                    <span class="order-no"><%list.ordersn%></span>
                    <span><%list.createtime%></span>
                </div>
                <div class="order-info-price">
                    <span>+ <%list.commission%></span>
                    <span class="order-state"><%list.statusText%></span>
                </div>
            </li>
            <%/each%>
        </ul>
        <%else%>
        <div class="col-xs-12 text-center" style="height: 150px; line-height: 150px;">
            <span>您还没有 <%member.statusText%> 订单，快去推荐好友购买吧。</span>
        </div>
        <%/if%>
    </div>

    <div style="height:46px;"></div>

</script>

<script  id='tpl_lists' type="text/html">

    <%each lists as list%>
    <li class="list-group-item">
        <div class="order-info">
            <span class="order-no"><%list.ordersn%></span>
            <span><%list.createtime%></span>
        </div>
        <div class="order-info-price">
            <span>+ <%list.commission%></span>
            <span class="order-state"><%list.statusText%></span>
        </div>
    </li>
    <%/each%>

</script>

<script type="text/javascript">

require(['tpl', 'core'], function (tpl, core) {

    //$('#container').append('<div id="credit_loading"><i class="fa fa-spinner fa-spin"></i> 正在加载...</div>');

    var status = "{$_GPC['status']}";
    var page  = 1;

    function bindScroller(){
        //加载更多
        var loaded = false;
        var stop = true;

        $('#main-box').scroll(function () {

            if (loaded) {
                return;
            }

            totalheight = parseFloat($('#main-box').height()) + parseFloat($('#main-box').scrollTop());

            if ($('.list-group').height()+40 <= totalheight) {
                if (stop == true) {
                    stop = false;
                    page++;

                    core.json('member/orderx', {status : status, page: page}, function (morejson) {
                        stop = true;

                        $("#main-box ul").append(tpl('tpl_lists', morejson.result));

                        if (morejson.result.lists.length < morejson.result.pagesize) {
                            loaded = true;
                            $('#main-box').scroll = null;
                            core.tip.show('已完成全部加载');
                            return '';
                        }
                    }, true);
                }
            }

        });
    }

    function getOrder(status) {
        core.json('member/orderx', {status : status, page: page}, function (json) {

            if(json.status == 1){
                $("#container").append(tpl('tpl_header', json.result));
                $("#container").append(tpl('tpl_content', json.result));

                bindScroller();
            }

        }, true);
    }

    getOrder("{$_GPC['status']}");

});

</script>

{php $show_footer=true}
{template 'common/footer'}